
<template>
  <template v-if="!optionModel.rightHidden">
    <el-form-item :label="i18nt('designer.setting.rightActionButtonEditing')"
      class="custorm">
      <!-- <el-select v-model="value"
        placeholder="请选择">
        <el-option v-for="item in optionModel.fieldOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select> -->
      <el-button type="primary"
        round
        plain
        @click="onDataSourceEdit">编辑</el-button>
    </el-form-item>
    <operation-button-edit-dialog ref="operationButtonEditDialogRef"
      type="right"
      :optionModel="optionModel"></operation-button-edit-dialog>
  </template>
</template>

<script>
import i18n from "@/utils/i18n"
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
import { OperationButtonEditDialog } from '@/components/dialogs'
import eventBus from '@/utils/event-bus';

export default {
  name: "right-action-editor",
  mixins: [i18n, propertyMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  components: { OperationButtonEditDialog },
  data() {
    return {
      value: ''
    }
  },
  watch: {
    'optionModel.buttonCurrentValue': {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        if (newValue) {
          this.value = newValue
        } else {
          this.value = ''
        }
      }
    },
  },
  mounted() {
    this.onEventBus()
  },
  methods: {
    /**打开弹框 */
    onDataSourceEdit() {
      const array = this.value ? this.optionModel.rightFieldOption[this.value] : []
      this.$refs.operationButtonEditDialogRef.handleOpen(array)
    },
    /**监听数据 */
    onEventBus() {
      //用于兄弟组件接收事件
      eventBus.$on('buttonGroupData', data => {
        this.optionModel.fieldOptions = [
          ...data
        ]
      });
      //用于兄弟组件接收事件
      eventBus.$on('rightButtonData', ({ data, buttonCurrentValue }) => {
        this.optionModel.buttonCurrentValue = buttonCurrentValue
        this.value = buttonCurrentValue
        if (this.value) {
          this.optionModel.rightFieldOption = {
            ...this.optionModel.rightFieldOption,
          }
          this.optionModel.rightFieldOption[this.value] = data
        }
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.custorm {
  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
  }
}
</style>
